<template>
	<app-layout>
		<view class="order-box">
			<view class="title-box">
				<app-switch-tab @tabEvent="clickTab" :isborderBottom="false" :bgColor="bgColor" :currentIndex="currentIndex" :list="list"></app-switch-tab>
			</view>
			<view v-if="is_show" class='content-box'>
				<template v-if="orders.length">
					<view v-for='(item, index) in orders' :key='item.id' :style="{'margin-top': index == 0 ? '104rpx' : '0'}" class='order-item-box dir-top-wrap'>
						<app-jump-button :url="currentIndex ==5?`/pages/order/refund-detail/refund-detail?id=${item.id}&sign=${item.sign}`:`/pages/order/order-detail/order-detail?id=${item.id}&sign=${item.sign}`"
						 open_type="navigate">
							<view class="dir-top-nowrap" style="width: 100%">
								<view class='dir-left-nowrap view-1'>	
									<view class='box-grow-1'>订单号：{{item.order_no}}</view>
									<template v-if='item.status == 0'>
										<text v-if='item.sign == "pintuan"'>{{item.is_pay == 1 ? '拼团中' : '待付款'}}</text>
									</template> 
									<template v-else>
										<block v-if="type == 1">
											<view v-if="item.jimaiOrder.is_macth == 0" style="color: #FF8859;">预约中</view>
											<view v-else style="color: #63BE72;">预约成功</view>
											<view style="margin-left: 10upx;" v-if="item.jimaiOrder.is_macth == 1">{{item.status_text}}</view>
										</block>
										<block v-else-if="type == 2">
											<view v-if="item.jimaiOrder.jimai_state == 1" style="color: #FF8859;">待寄卖</view>
											<view v-else-if="item.jimaiOrder.jimai_state == 2" style="color: #63BE72;">已寄卖</view>
											<view v-else-if="item.jimaiOrder.jimai_state == 3" style="color: #63BE72;">已分享</view>
											<view v-else-if="item.jimaiOrder.jimai_state == 4" style="color: #63BE72;">已自提</view>
											<view style="margin-left: 10upx;" v-if="item.jimaiOrder.jimai_state == 4">{{item.status_text}}</view>
										</block>
										<block v-else>
											<view v-if="item.jimaiOrder.is_macth == 0" style="color: #FF8859;">预约中</view>
											<view v-else style="color: #63BE72;">预约成功</view>
											<view v-if="item.jimaiOrder.is_macth == 1" style="margin-left: 10upx;">{{item.status_text}}</view>
										</block>
									</template>
								</view>
								<view v-for='(dItem, dIndex) in item.detail' :key='dIndex' class='view-2'>
									<app-order-goods-info :goods='dItem.goods_info' :type="type" :integral="dItem.goods.forehead_integral"></app-order-goods-info>
								</view>
							</view>
						</app-jump-button>
						<view class='dir-top-nowrap view-3'>
							<template v-if='currentIndex == 5'>
								<view v-if='item.type == 1' class='box-grow-1'>退货退款:
									<text class='price-color'>￥{{item.refund_price}}</text>
								</view>
								<view v-else class='box-grow-1'>换货</view>
							</template>
							<template v-else>
								<view class='box-grow-1 main-right cross-center price-count-box'>
									<text class="price-label">合计:</text>
									<text class='price-color'>￥{{item.total_pay_price}}</text>
									<text v-if="item.express_price > 0" class="price-express">(含运费￥{{item.express_price}})</text>
								</view>
							</template>
							<view class='box-grow-0 main-right action-button-box'>
								<app-jump-button>
									<view class="main-right action-box-view">
										<!-- 售后订单 -->
										<template v-if='currentIndex == 5'>
											<text :class="{'success-color': item.is_confirm == 1 ? true : false}">
												{{item.status_text}}
											</text>
										</template>
										<!-- 其它订单 -->
										<template v-else>
											<!-- 货到付款订单操作 start -->
											<template v-if='item.pay_type == 2'>
												<!-- 进行中的订单 不能进行订单操作 -->
												<template v-if='item.status == 1'>
													<!-- 待收货-->
													<template v-if='item.is_confirm == 0'>
														<block v-if='item.is_send == 1 && item.der_info.length == 1 && item.send_type == 0'>
															<view v-if="item.der_info[0].orderExpress.send_type == 1" @click='logistics(item)' class='order-btn'>
																物流
															</view>
														</block>
														<view v-else-if='item.der_info.length == 0 && item.is_send == 1 && item.send_type == 0 && item.express_no && item.express'
														 @click='logistics(item)' class='order-btn'>物流
														</view>
														<view v-else-if='item.der_info.length >= 1' @click='logistics(item)' class='order-btn'>物流
														</view>
														<view v-if="item.is_send == 1 && item.is_confirm == 0" @click='confirm(item)' class='order-btn'>确认收货
														</view>
													</template>
													<!-- 核销 -->
													<!-- 到店自提订单 在核销前有收款操作 -->
													<template v-if='item.send_type ==1 && item.is_confirm == 0 && item.cancel_status == 0'>
														<view @click='getClerkCode(item)' class='order-btn'>核销码</view>
													</template>
													<!-- <template v-if='item.is_confirm == 1 && item.is_comment == 0 && item.is_sale == 0 && item.sale_status == 0'>
														<view @click='appraise(item)' class='order-btn'>评价</view>
													</template> -->
												</template>
											</template>
											<!-- 货到付款订单操作 end -->
											<!-- 已支付订单操作 start -->
											<template v-else>
												<!-- 待付款 -->
												<template v-if='item.is_pay == 0'>
													<view @click="cancel(item)" class='order-btn'>取消</view>
													<view @click='orderPay(item)' class='order-btn'>付款</view>
												</template>

												<template v-if='item.status == 1'>
													<!-- 核销 -->
													<!-- 到店自提订单 未支付不显示核销码 | 未支付 货到付款订单显示核销码 -->
													<template v-if='item.send_type ==1 && item.is_confirm == 0 && ((item.is_pay == 0 && item.pay_type == 2) || (item.is_pay == 1 && item.pay_type != 2))'>
														<view @click='getClerkCode(item)' class='order-btn'>核销码</view>
													</template>

													<!-- 待收货-->
													<template v-if='item.is_pay == 1 && item.is_confirm == 0'>
														<block v-if='item.der_info && item.der_info.length == 1 && item.is_send == 1 && item.send_type == 0'>
                                                            <view v-if="item.der_info[0].orderExpress.send_type == 1"
                                                                  @click='logistics(item)' class='order-btn'>
                                                                物流
                                                            </view>
                                                        </block>
                                                       <view v-else-if='item.der_info && item.der_info.length == 0 && item.is_send == 1 && item.send_type == 0 && item.express_no && item.express'
                                                              @click='logistics(item)' class='order-btn'>物流
                                                        </view>
                                                       <view v-else-if='item.der_info && item.der_info.length >= 1'
                                                              @click='logistics(item)' class='order-btn'>物流
                                                        </view>
														<view v-if="item.is_send == 1 && item.is_confirm == 0" @click='confirm(item,index)' class='order-btn'>确认收货</view>
														<block v-if="item.is_send == 0 && item.is_confirm == 0 && type == 2">
															<view v-if="item.jimaiOrder.jimai_state == 1" class='order-btn' @click="toJimai(item.detail[0],item)">待寄卖</view>
															<view v-else-if="item.jimaiOrder.jimai_state == 3" class='order-btn' @click="todetail(item)" style="color: #63BE72;">立即分享</view>
														</block>
													</template>
													<!-- <template v-if='item.is_confirm == 1 && item.is_comment == 0 && item.is_sale == 0 && item.sale_status == 0'>
														<view @click='appraise(item)' class='order-btn'>评价</view>
													</template> -->
												</template>
											</template>
											<!-- 已支付订单操作 end -->
										</template>
									</view>
								</app-jump-button>
							</view>
						</view>
					</view>
				</template>
				<view class="no-list" v-else>
					<app-no-goods background="#f7f7f7" title="暂无相关订单" :is_image="1"></app-no-goods>
				</view>
				<!-- 核销码展示 -->
				<view v-if='is_qrcode' class='qrcode-box'>
					<view class='dir-top-wrap main-center cross-center item'>
						<view>核销码</view>
						<image class='img' :src='qr_code_url'></image>
						<image @click='closeQrcode' src='/static/image/icon/icon-close.png' class='remove'></image>
					</view>
				</view>
			</view>
			<app-load-text v-if="is_load_show"></app-load-text>
			<view class="return-index-btn" v-if="show_index">
				<app-jump-button open_type="redirect" url="/pages/index/index">
					<image src="/static/image/icon/index.png" style="width: 50rpx;height: 50rpx"></image>
				</app-jump-button>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appSwitchTab from '@/components/basic-component/app-switch-tab/app-switch-tab.vue';
	import appNoGoods from '@/components/page-component/app-no-goods/app-no-goods.vue';
	import appOrderGoodsInfo from '@/components/page-component/app-order-goods-info/app-order-goods-info.vue';
	import {
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}], //
				page: 1,
				currentIndex: 0,
				orders: [],
				pagination: null,
				qr_code_url: '',
				is_qrcode: false,
				is_show: false,
				is_load_show: false,
				show_index: false,
				bgColor: '#f7f7f7',
				isRequest: true, //防止数据重复加载
				template_message: [],
				type: 1
			}
		},
		onLoad(options) {
			this.type = options.type
			this.currentIndex = options.status ? options.status : this.currentIndex;
		},
		onReachBottom() {
			this.is_load_show = true;
			this.getList()
		},
		onShow() {
			let self = this;
			let interval = setInterval(function() {
				if (self.isRequest) {
					self.page = 1;
					self.$showLoading();
					self.getList();
					self.$store.dispatch('gConfig/setTabBarBoolean', self.tabBarNavs.navs);
				}
				let pages = getCurrentPages();
				if (pages.length < 2) {
					self.show_index = true;
				}
				clearInterval(interval)
			}, 300);
		},
		computed: {
			...mapGetters('mallConfig', {
				tabBarNavs: 'getNavBar'
			}),
		},
		components: {
			'app-switch-tab': appSwitchTab,
			'app-order-goods-info': appOrderGoodsInfo,
			'app-no-goods': appNoGoods,
		},
		methods: {
			getList() {
				this.isRequest = false;
				this.$request({
					url: this.$api.jimai.order_list,
					data: {
						status: this.currentIndex,
						page: this.page,
						order_type: this.type
					}
				}).then(response => {
					let {
						code,
						data,
						msg
					} = response;
					this.$hideLoading();
					this.is_load_show = false;
					this.is_show = true;
					if (code == 0) {
						console.log(111)
						let {
							list,
							pagination
						} = data;
						if (this.page != 1) {
							this.orders = this.orders.concat(list)
						} else {
							this.orders = list;
						}
						console.log(this.orders)
						// this.page = list.length ? this.page + 1 : this.page;
						// this.pagination = pagination;
						// this.template_message = data.template_message;
					} else {
						uni.showModal({
							title: '',
							content: msg,
							showCancel: false,
						});
					}
					this.isRequest = true;
				}).catch(() => {
					this.is_load_show = false;
					this.$hideLoading();
				});
			},
			clickTab(params) {
				if (this.isRequest) {
					this.page = 1;
					this.currentIndex = params.currentIndex;
					this.is_show = false;
					this.$showLoading();
					this.getList();
				}
			},
			getPageUrl: function(id, sign) {
				if (this.currentIndex == 5) {
					return `/pages/order/refund-detail/refund-detail?id=${id}&sign=${sign}`
				} else {
					return `/pages/order/order-detail/order-detail?id=${id}&sign=${sign}`
				}
			},
			// testConfirm(){
			// 	uni.redirectTo({
			// 		url: '/plugins/jimai/order?status=' + this.currentIndex +'&type='+this.type
			// 	});
			// },
			// 确认收货
			confirm(item,index) {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '是否确认收货?',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '确认收货中'
							});
							self.$request({
								url: self.$api.order.confirm,
								data: {
									id: item.id
								}
							}).then(response => {
								uni.hideLoading();
								if (response.code === 0) {
									// this.orders.splice(index,1)
									uni.redirectTo({
										url: '/plugins/jimai/order?status=' + self.currentIndex +'&type='+self.type
									});
								} else {
									uni.showModal({
										title: '',
										content: response.msg,
										showCancel: false,
									});
								}
							}).catch(() => {
								uni.hideLoading()
							});
						}
					}
				});
			},
			// 取消
			cancel(e) {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '是否取消订单？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中'
							});
							self.$request({
								url: self.$api.order.cancel,
								data: {
									id: e.id
								}
							}).then(response => {
								uni.hideLoading();
								if (response.code == 0) {
									uni.redirectTo({
										url: '/plugins/jimai/order?status=' + this.currentIndex +'&type='+this.type
									});
								} else {
									uni.showModal({
										title: '',
										content: response.msg,
										showCancel: false,
									});
								}
							}).catch(() => {
								uni.hideLoading();
							});
						}
					}
				});
			},
			// 物流信息
			logistics(orderDetail) {
				if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 0) {
					let [id, express, express_no, customer_name, cover_pic] = [orderDetail.id, orderDetail.express, orderDetail.express_no,
						orderDetail.customer_name, orderDetail.detail[0].goods_info.pic_url
					];
					uni.navigateTo({
						url: `/pages/order/express-detail/express-detail?id=${id}&express=${express}&express_no=${express_no}&customer_name=${customer_name}&cover_pic=${cover_pic}`
					})
				} else if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 1) {
					let express = orderDetail.detailExpress[0].express;
					let express_no = orderDetail.detailExpress[0].express_no;
					let customer_name = orderDetail.detailExpress[0].customer_name;
					let cover_pic = orderDetail.detailExpress[0].expressRelation[0].orderDetail.goods_info.goods_attr.cover_pic;
					uni.navigateTo({
						url: `/pages/order/express-detail/express-detail?express=` + express + `&customer_name=` + customer_name +
							`&express_no=` + express_no + `&cover_pic=` + cover_pic
					})
				} else if (orderDetail.detailExpress.length >= 1) {
					uni.navigateTo({
						url: '/pages/order/express-list/express-list?order_id=' + orderDetail.id
					});
				}
			},
			// 订单支付
			orderPay(e) {
				let _this = this;
				_this.$showLoading();
				_this.$request({
					url: _this.$api.order.list_pay_data,
					data: {
						id: e.id
					}
				}).then(response => {
					_this.$hideLoading();
					if (response.code === 0) {
						_this.$payment.pay(response.data.id).then(() => {
							// 支付成功
							uni.redirectTo({
								url: '/plugins/jimai/order?type='+_this.type
							})
						}).catch(e => {
							// 支付失败
							uni.showModal({
								title: '',
								content: e.errMsg,
								showCancel: false
							})
						})
					}
				}).catch(() => {
					_this.$hideLoading();
				});
			},
			// 订单评价
			appraise(e) {
				uni.navigateTo({
					url: `/pages/order/appraise/appraise?id=${e.id}`
				})
			},
			getClerkCode(e) {
				let self = this;
				self.$showLoading();
				self.$request({
					url: self.$api.order.clerk_qr_code,
					data: {
						id: e.id
					}
				}).then(response => {
					self.$hideLoading();
					if (response.code === 0) {
						self.qr_code_url = response.data.file_path;
						self.is_qrcode = true;
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(() => {
					self.$hideLoading();
				});
			},
			closeQrcode() {
				this.is_qrcode = false;
			},
			toJimai(detail,item){
				var obj = {
					name:detail.goods_info.name,
					price:detail.total_price,
					num:detail.goods_info.num,
					pic_url:detail.goods_info.pic_url,
					goods_id:detail.goods_id,
					order_id:detail.order_id,
					give_integral:detail.goods.give_integral,
					mch_id:item.mch_id,
					share_goods_id:item.jimaiOrder.share_goods_id
				}
				uni.navigateTo({
					url:'/plugins/jimai/toJimai?datas='+JSON.stringify(obj)
				})
			},
			todetail(item){
				uni.navigateTo({
					url:`/pages/order/order-detail/order-detail?id=${item.id}&sign=${item.sign}`
				})
			}
		}
		
	}
</script>

<style scoped lang="scss">
	.order-box {
		width: 100%;
		height: 100%;
	}

	.title-box {
		height: 80#{rpx};
		width: 100%;
		position: fixed;
		border-bottom: 1#{rpx} solid $uni-weak-color-one;
		/*  #ifdef  H5  */
		top: 44px;
		/*  #endif  */
		/*  #ifndef  H5  */
		top: 0;
		/*  #endif  */
		background: #fff;
		z-index: 1;
	}

	.no-list {
		margin-top: #{150upx};
	}

	.content-box {
		margin-top: 80#{rpx};
	}

	.not-order-box {
		height: calc(100vh - 80#{rpx});
		color: $uni-general-color-two;
	}

	.order-item-box {
		background: #fff;
		padding: 0 24#{rpx};
		margin: 0 24#{rpx};
		margin-bottom: 24#{rpx};
		border-radius: 16#{rpx};
		font-size: $uni-font-size-general-two;
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.06);
	}

	.order-item-box .view-1 {
		width: 100%;
		font-size: $uni-font-size-weak-one;
		color: $uni-important-color-black;
		margin: 32#{rpx} 0;
	}

	.order-item-box .view-2 {}

	.order-item-box .view-3 {
		font-size: $uni-font-size-import-two;
	}

	.order-item-box .view-3 .btn {
		margin-left: 15#{rpx};
	}

	.price-count-box {
		margin: 28#{rpx} 0;
	}

	.price-label {
		margin-right: 5#{rpx};
	}

	.price-color {
		color: $uni-important-color-black;
	}

	.price-express {
		font-size: $uni-font-size-weak-two;
		color: $uni-general-color-two;
	}

	.success-color {
		color: $uni-important-color-black;
	}

	.error-color {
		color: $uni-important-color-red;
	}

	.qrcode-box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.qrcode-box .item {
		position: absolute;
		top: 25%;
		width: 562#{rpx};
		height: 562#{rpx};
		background: #fff;
		left: 94#{rpx};
		z-index: 999;
		border-radius: 15#{rpx};
	}

	.qrcode-box .img {
		margin-top: 30#{rpx};
		width: 375#{rpx};
		height: 375#{rpx};
	}

	.qrcode-box .item .remove {
		position: absolute;
		top: 0;
		right: 0;
		width: 50#{rpx};
		height: 50#{rpx};
		margin: 15#{rpx};
		padding: #{7rpx}
	}

	.order-btn {
		display: inline-block;
		line-height: 2.3;
		font-size: 26#{rpx};
		padding: 0 30#{rpx};
		border: 1#{rpx} solid $uni-weak-color-one;
		border-radius: 30#{rpx};
		margin-left: 16#{rpx};
	}

	.action-button-box {
		margin-bottom: 24#{rpx};
	}

	.return-index-btn {
		position: fixed;
		right: 0;
		bottom: #{100rpx};
		display: inline-block;
		background: rgba(157, 157, 157, 0.5);
		padding: #{10rpx} #{20rpx};
		z-index: 1000;
		border-radius: #{10rpx} 0 0 #{10rpx};
	}

	.action-box-view {
		width: 100%;
	}
</style>
